<template>
  <div id="boutiquePlaylist">
    <el-row type="flex" justify="center">
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
        <div class="container">
          <div class="head">
            <p class="bout-title">
              精品歌单<a
                href="https://music.163.com/#/topic?id=202001"
                target="_blank"
                ><Icon type="ios-help-circle-outline"
              /></a>
            </p>
            <div class="tags" @click="tagShow===false?tagShow=true:tagShow=false">
              <Icon type="ios-funnel-outline" />{{ $store.state.tagName }}
            </div>
            <div class="tags-list" v-show="tagShow">
                <p class="all" @click="songListchange('全部')">全部歌单</p>
                <el-divider></el-divider>
               <ul class="other-tag">
                   <li v-for="(item, index) in quaTags" :key="index"
                   :class="{active:item.name===$store.state.tagName}"
                    @click="songListchange(item.name)"
                   >
                       {{item.name}}
                   </li>
               </ul>
            </div>
          </div>
          <ul class="bout-list">
            <li v-for="(item, index) in $store.state.songList" :key="index">
              <div class="left">
                <div class="images" @click="skip(item)">
                  <img v-lazy="item.coverImgUrl" alt="" />
                  <div class="play-icon">
                    <img src="../ranklist/images/play.png" alt="" />
                  </div>
                  <div class="playcount">
                    <Icon type="ios-play-outline" class="play-icons" />{{
                      item.playCount > 10000
                        ? Math.floor(item.playCount / 10000) + "万"
                        : item.playCount
                    }}
                  </div>
                </div>
              </div>
              <div class="right">
                <p class="name" @click="skip(item)">{{ item.name }}</p>
                <div class="user">
                  by <span>{{ item.creator.nickname }}</span>
                  <div class="icons-vip">
                    <img
                      v-lazy="
                        item.creator.avatarDetail !== null
                          ? item.creator.avatarDetail.identityIconUrl
                          : ''
                      "
                      alt=""
                    />
                  </div>
                </div>
                <div class="desc">
                  <div class="tagicon">{{ item.tag }}</div>
                  <p class="nowrap">{{ item.copywriter }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "boutiquePlaylist",
  data () {
      return {
          tagShow:false,
          quaTags:[],
      }
  },
  created() {
      //热门歌单分类
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/playlist/highquality/tags?timetamp=" + new Date().getTime(),
    }).then((res) => {
      this.quaTags = res.data.tags;
    });
  },
  methods: {
      //歌单列表
    songListchange(tag) {
      this.tagShow = false
      this.axios({
        method: "get",
        withCredentials: true,
        url:
          "https://music.hzbiz.net/top/playlist/highquality?timetamp=" +
          new Date().getTime(),
        params: {
          limit: 100,
          cat: tag,
        },
      }).then((res) => {
        this.hdShow = res.data.playlists.length > 0;
        if (res.data.playlists.length > 0) {
          this.$store.commit("saveSongList", res.data.playlists);
          if (tag === "全部") {
            this.$store.commit("saveTagName", "全部歌单");
          } else {
            this.$store.commit("saveTagName", tag);
          }
          console.log("精品", res.data);
        } else {
          //   this.$message({
          //     type: "error",
          //     message: "分类精品内容不存在",
          //     showClose: true,
          //   });
        }
      });
      },
      //跳转歌单详情
     skip(item) {
      this.$router.push({
        path: "/homepage/contents/rankdetail",
        query: {
          detail: item,
          id: item.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.container .bout-title {
  color: #000;
  font-size: 20px;
  font-weight: bold;
}
.container .bout-title a {
  color: #000;
}
.container .head {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.container .head .tags-list{
    position: absolute;
    top: 40px;
    right: 0px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 510px;
    background-color: #ffffff;
    z-index: 999;
}
.container .head .tags-list p.all{
    padding: 25px 37px;
    cursor: pointer;
}
.container .head .tags-list p.all:hover{
    color:  #ec4141;
}
.container .head .tags-list .el-divider{
    margin: 0;
}
.container .head .tags-list .other-tag{
    padding: 20px 37px;
    display: flex;
    flex-wrap: wrap;
}
.container .head .tags-list .other-tag li{
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 16px;
}
.container .head .tags-list .other-tag li.active{
    color: #ec4141;
  background-color: #FDF5F5;
}
.container .head .tags-list .other-tag li:hover{
    color: #ec4141;
}
.container .head .tags {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.container .head .tags:hover {
  background-color: #f5f5f5;
}
.container .bout-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.container .bout-list li {
  display: flex;
  align-items: center;
  width: 435px;
  margin-bottom: 20px;
  margin-right: 90px;
}
.container .bout-list .images {
  width: 134px;
  height: 134px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}
.container .bout-list .right {
  font-size: 12px;
  color: #cfcfcf;
  margin-left: 5px;
}
.container .bout-list .right p.name {
  color: #000;
  font-size: 14px;
  cursor: pointer;
}
.container .bout-list .user .icons-vip {
  width: 15px;
  height: 15px;
  overflow: hidden;
   margin-left: 3px;
}
.container .bout-list .user {
  margin: 15px 0 25px;
}
.container .bout-list .user > span {
  margin-left: 3px;
  cursor: pointer;
  transition: all 0.6s;
}
.container .bout-list .user > span:hover {
  color: #000;
  transition: all 0.6s;
}
.container .bout-list .user,
.container .bout-list .desc {
  display: flex;
  align-items: center;
}
.container .bout-list .tagicon {
  color: #ec4141;
  min-width: 35px;
  padding: 0 2px;
  border: 1px solid #ec4141;
  border-radius: 3px;
  margin-right: 3px;
  text-align: center;
}

.container .bout-list .images .play-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: all 0.6s;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.container .bout-list .images:hover .play-icon {
  opacity: 1;
}
.container .bout-list .images .play-icon img {
  width: 65%;
  margin-left: 5px;
}
.container .bout-list .images .playcount {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #ffffff;
  display: flex;
  justify-content: center;
}
.container .bout-list .images .playcount .play-icons {
  margin-right: 3px;
  font-size: 16px;
}
</style>